<template>
    <div class="box3">
        <form action="/">
            <van-search v-model="value" show-action placeholder="请输入搜索商品" @search="onSearch" @cancel="onCancel" autofocus />
        </form>
        <van-loading type="spinner" color="#1989fa" style="text-align: center;" v-if="loding" />
        <div class="box-sou" v-if="!loding">
            <div class="sou-lishi">
                <h4>历史记录</h4>
                <div class="sou-list">
                    <span v-for="(item, index) in historyKeywordList" :key="index" @click="sou(item)">{{ item }}</span>
                </div>
            </div>
        </div>
        <div class="box-sou" v-if="!loding">
            <div class="sou-lishi">
                <h4>热门搜索</h4>
                <div class="sou-list">
                    <span v-for="(item, index) in hotKeywordList" :key="index">{{ item.keyword }}</span>
                </div>
            </div>
        </div>
        <!-- 搜索 -->
        <div class="zhe" v-if="sousuo.length > 0">
            <div class="zhe-box" v-for="item, index in sousuo" :key="index">{{ item }}</div>
            <div class="zhe-box1">没有更多了</div>
        </div>
        <!-- 搜索页 -->
        <div class="zhe" v-if="xianshi">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" disabled :options="option1" />
                <van-dropdown-item v-model="value3" :options="option" @change="add" />
                <van-dropdown-item v-model="value2" :options="option2" @change="bdd" />
            </van-dropdown-menu>
            <div class="box1">
                <div class="box2" @click="details(item.id)" v-for="item, index in shangpinList" :key="index">
                    <img :src="item.list_pic_url" alt="">
                    <span>{{ item.name }}</span>
                    <span class="jia">￥{{ item.retail_price.toFixed(2) }}元</span>
                </div>
            </div>
            <van-empty description="暂无商品哦" v-if="shangpinList.length == 0" />
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
import { Search, Helper, GoodsList } from '@/http/api'
export default {
  data () {
    return {
      value: '',
      // 热门搜索
      historyKeywordList: [],
      hotKeywordList: [],
      loding: true,
      sousuo: [],
      value1: 0,
      value3: 0,
      value2: 0,
      switch1: false,
      switch2: false,
      option1: [{ text: '全部商品', value: 0 }],
      option: [
        { text: '价格', value: 0 },
        { text: '由低到高', value: 1 },
        { text: '由高到低', value: 2 }
      ],
      option2: [],
      shangpinList: [],
      xianshi: false
    }
  },
  methods: {
    async sou (item) {
      const res = await GoodsList(item)
      this.shangpinList = res.data.data.data
      this.xianshi = true
    },
    onConfirm () {
      this.$refs.item.toggle()
      console.log(123)
    },
    async onSearch (val) {
      const res = await GoodsList(val)
      this.shangpinList = res.data.data.data
      let arr = {}
      res.data.data.filterCategory.forEach((item) => {
        arr.text = item.name
        arr.value = item.id
        arr.id = item.id
        this.option2.push(arr)
        arr = {}
        console.log(item)
      })
      this.xianshi = true
    },
    onCancel () {
      this.$router.push('/')
    },
    async Searcha () {
      const res = await Search()
      this.historyKeywordList = res.data.data.historyKeywordList
      this.hotKeywordList = res.data.data.hotKeywordList
      this.loding = false
    },
    async jiankong () {
      const res = await Helper(this.value)
      if (res.data.data.length == 0) {
        this.sousuo = ['无']
      } else {
        this.sousuo = res.data.data
      }
      console.log(this.sousuo)
    },
    add (a) {
      console.log(a)
      // 1从低到高
      if (a === 1) {
        this.shangpinList.sort((a, b) => a.retail_price - b.retail_price)
      } else {
        this.shangpinList.sort((a, b) => b.retail_price - a.retail_price)
      }
    },
    async bdd (a) {
      const b = a
      const res = await GoodsList('', b)
      console.log(res)
      this.shangpinList = res.data.data.data
    },
    // 跳转到详情页
    details (id) {
      console.log(id)
      this.$router.push({ path: '/admin/details', query: { id } })
    }

  },
  mounted () {
    this.Searcha()
  },
  watch: {
    value: {
      handler () {
        this.jiankong()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box3 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #ccc;
    z-index: 30;
    position: absolute;

    .zhe {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        z-index: 555;
        top: 48px;

        .box1 {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .box2 {
                width: 50%;

                img {
                    width: 100%;
                }

                span {
                    display: block;
                    font-size: 15px;
                    text-align: center;

                }

                .jia {
                    color: #9a0000;
                }
            }
        }

        .zhe-box {
            font-size: 16px;
            box-sizing: border-box;
            padding: 10px 15px;
        }

        .zhe-box1 {
            text-align: center;
            font-size: 16px;
            box-sizing: border-box;
            color: #a4a4a4;
        }
    }

    .box-sou {
        width: 100%;
        background-color: #fff;

        h4 {
            font-size: 14px;
            font-weight: 400;
            margin-left: 10px;
        }

        .sou-list {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 5px 10px;

            span {
                font-size: 13px;
                color: #8a8a8a;
                margin-right: 5px;
                margin-bottom: 5px;
                border: 1px solid;
                box-sizing: border-box;
                padding: 3px 5px;
            }
        }

        .sou-list:first-child {
            color: red;
            background-color: #000;
        }

    }
}
</style>
